<template>
  <the-table :columns="columns" uri="sells" ref="table">
    <span slot="action" slot-scope="{ row }">
      <a
        v-if="row.state === 'pending'"
        class="ant-dropdown-link"
        @click="$emit('review', row)"
        ><a-icon type="edit" /> 卖币待审
      </a>
      <a
        v-if="row.state === 'checking'"
        class="ant-dropdown-link"
        @click="$emit('review', row)"
        ><a-icon type="edit" /> 买币待审
      </a>

      <a-popconfirm
        title="解除订单商户锁定？"
        v-if="lockLimit(row)"
        @confirm="confirmUnlock(row)"
      >
        <a class="ant-dropdown-link"><a-icon type="stop" /> 解除锁定 </a>
      </a-popconfirm>
    </span>
  </the-table>
</template>
<script>
import theTable from '@/components/theTable.vue'
import { parseISO, compareAsc, addMinutes } from 'date-fns'
import { mapGetters } from 'vuex'

const columns = [
  {
    title: '用户名',
    dataIndex: 'member.username',
    searchAble: true,
  },
  {
    title: '订单号',
    dataIndex: 'id',
  },
  {
    title: '出币值',
    dataIndex: 'coins',
  },

  {
    title: '银行',
    dataIndex: 'bank',
    width: 120,
  },
  {
    title: '银行卡',
    dataIndex: 'bankcard',
  },
  {
    title: '开户人',
    dataIndex: 'realname',
    width: 80,
  },
  {
    title: '提交时间',
    dataIndex: 'created_at',
  },
  {
    title: '完成时间',
    dataIndex: 'done_at',
  },
  {
    title: '状态',
    dataIndex: 'state',
    dataType: 'select',
    searchAble: true,
    search: {
      selectOptions: [
        { title: '待审', value: 'pending' },
        { title: '已通过', value: 'pass' },
        // { title: '已拒绝', value: 'reject' },
        { title: '已接单', value: 'took' },
        { title: '已完成', value: 'done' },
        { title: '已取消', value: 'canceled' },
      ],
    },
    width: 90,
    customRender: (val) => {
      const map = new Map([
        ['pending', '卖币审核'],
        ['pass', '已通过'],
        ['reject', '已拒绝'],
        ['took', '已接单'],
        ['done', '已完成'],
        ['canceled', '已取消'],
        ['locking', '已锁定'],
        ['checking', '买币审核'],
      ])
      return map.get(val)
    },
  },
  {
    title: '接单商户',
    dataIndex: 'seller.username',
    searchAble: true,
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    width: 120,
  },
]

export default {
  components: { theTable },

  data() {
    return {
      columns,
    }
  },
  computed: {
    ...mapGetters('account', ['sys']),
  },
  created() {
    const handler = (res) => {
      if (res.type === 'locking-expired' || res.type === 'sold') {
        this.$refs.table.onRefresh()
      }
    }
    this.$channel.bind('sell-change', handler)
    this.$once('hook:beforeDestroy', () => {
      this.$channel.unbind('sell-change', handler)
    })
  },
  mounted() {},
  methods: {
    lockLimit(row) {
      if (row.state === 'locking') {
        const m = this.sys.sell_lock_minues
        const limit = addMinutes(parseISO(row.updated_at), m)
        // console.log(limit)
        return compareAsc(new Date(), limit) === 1
      }
      return false
    },
    confirmUnlock(row) {
      this.axios.put(`/a/sells/${row.id}/unlock`).then((res) => {
        if (res.data.code === 1) {
          this.$message.success('操作成功')
          this.$refs.table.onRefresh()
          this.$store.dispatch('account/noticeCount')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
  },
}
</script>
